<template>
	<view class="wanl-search">
		<!-- 导航条 -->
		<view class="cu-custom">
			<view class="cu-bar">
				<view class="action" @click="onBack">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<input type="text" confirm-type="search" placeholder-style="color: #ccc"
						:placeholder="searchKeywords ? searchKeywords : '搜索商品、类目'" 
						@input="onSearchInputChanged" focus />
				</view>
			</view>
		</view>
		<view class="history padding-lr" v-if="isHistory">
			<view v-if="historyList.length > 0">
				<view class="title">
					<text>历史搜索</text>
					<text class="wlIcon-lajitong" @tap="removeHistory"></text>
				</view>
				<view class="list">
					<view v-for="(item, index) in historyList" :key="item.id"
						@tap="keywordsToList(item)">{{ item.title }}</view>
				</view>
			</view>
			<view>
				<view class="title">
					<text>热门搜索</text>
					<text class="wlIcon-guanzhu"></text>
				</view>
				<view class="list">
					<block v-for="(item, index) in searchList" :key="item.id">
						<view v-if="item.flag == 'hot'" class="action" @tap="keywordsToList(item)">
							<text>{{ item.title }}</text>
							<text class="cu-tag badge">hot</text>
						</view>
						<view @tap="keywordsToList(item)" v-else>
							<text>{{ item.title }}</text>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="cu-list menu" v-else>
			<view class="cu-item" v-for="(item, index) in search.searchList" :key="item.id">
				<view class="content" @tap="keywordsToList(item)">
					<text class="text-sm">{{ item.title }}</text>
				</view>
			</view>
		<!-- 	<view class="cu-item arrow" v-for="(item, index) in search.categoryList" :key="item.id"
				@tap="categoryToList(item.id, item.name)">
				<view class="content">
					<text class="text-sm text-gray">{{ item.name }}</text>
				</view>
				<view class="action">
					<view class="cu-tag round bg-orange light">{{ item.name }}类目</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				searchKeywords: '',
				isHistory: true, //历史记录&实时搜索
				searchList: {}, //热门搜索列表
				historyList: [], //历史记录列表
				search: {
					categoryList: {},
					searchList: {}
				}
			};
		},
		onReady() {
			this.loadData();
			this.historyList = uni.getStorageSync('search:history');
		},
		onLoad(option) {
			if (option.keywords) {
				this.searchKeywords = option.keywords;
			}
		},
		methods: {
			onBack(){
				uni.navigateBack()
			},
			// 热门搜索
			async loadData() {
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.recommendsearch"
					},
					success: res => {
						this.searchList = res.data.data;
					}
				});
			},
			async loadSearch(val) {
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.search",
						search: val
					},
					success: res => {
						this.search.searchList = res.data.data
						if (res.data.data.length != 0) {
							this.isHistory = false
						}
					}
				});
			},
			// 存储历史数据
			setHistory(item) {
				this.loadData(); //重新加载热门搜索
				let historyList = uni.getStorageSync('search:history');
				this.historyList = [];
				this.historyList = historyList; //重新加载历史记录
				let searchHistory = historyList;
				if (!searchHistory) searchHistory = [];
				let serachData = item
				
				// 判断数组是否存在，如果存在，那么将放到最前面
				for (var i = 0; i < searchHistory.length; i++) {
					if (searchHistory[i].title === serachData.title) {
						searchHistory.splice(i, 1);
						break;
					}
				}
				searchHistory.unshift(serachData);
				uni.setStorage({
					key: 'search:history',
					data: searchHistory
				});
			},
			// 清空历史数据
			removeHistory() {
				uni.showModal({
					title: '提示',
					content: '是否清理全部搜索历史？该操作不可逆。',
					success: res => {
						if (res.confirm) {
							this.historyList = [];
							uni.removeStorage({
								key: 'search:history'
							});
						}
					}
				});
			},
			// 跳转列表
			keywordsToList(item) {
				this.setHistory({title:item.title,id:item.id});
				uni.navigateTo({
					url: '/pages/productDetails/productDetails?id=' + item.id
				});
			},
			categoryToList(category_id, category_name) {
				// this.setHistory(category_name);
				// this.$wanlshop.to(`/pages/product/list?data=${JSON.stringify({ category_id: category_id, category_name: category_name })}`);
			},
			onSearchInputChanged(event) {
				let value = event.detail.value;
				if (!value) {
					this.isHistory = true;
					return;
				} else {
					this.loadSearch(value);
				}
			},
			onSearchInputConfirmed(event) {
				let value = event.detail.value;
				if (!value) {
					this.isHistory = true;
					if (this.searchKeywords) {
						this.keywordsToList(this.searchKeywords);
					} else {
						uni.showModal({
							title: '提示',
							content: '请输入内容。'
						});
						return;
					}
				} else {
					this.isHistory = true;
					uni.hideKeyboard();
					this.historyList = [];
					this.historyList = uni.getStorageSync('search:history');
					this.keywordsToList(value); //跳转列表页面
				}
			}
		}
	};
</script>

<style>
	page {
		background: #ffffff;
	}

	[class*="wlIcon-"] {
		font-family: "wlIcon";
		font-size: inherit;
		font-style: normal;
	}

	.padding-lr {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.cu-custom {
		margin-top: 30upx;
	}

	.cu-custom .search-form {
		border: 3rpx solid #fe6600;
		background-color: #fff;
		margin-left: 0;
		margin-right: 25rpx;
	}

	.cu-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.cu-custom .cu-tag.badge {
		top: 10rpx;
		right: -15rpx;
	}

	.cu-custom .cu-bar {
		background-size: 100%;
	}

	.cu-custom .bar-bg {
		background-size: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.cu-custom .search-swiper {
		width: 100%;
		height: 100%;
	}

	.cu-bar .action.transparent:first-child {
		margin-left: 18rpx;
		font-size: 40rpx;
	}

	.cu-bar .action.transparent:last-child {
		margin-right: 18rpx;
		font-size: 40rpx;
	}

	.cu-bar .search-form {
		font-size: 28rpx;
	}

	.wanl-search .history>view {
		margin-bottom: 50rpx;
	}

	.wanl-search .history .title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
	}

	.wanl-search .list {
		display: flex;
		flex-wrap: wrap;
	}

	.wanl-search .list>view {
		background: #f8f8f8;
		color: #666666;
		margin: 20rpx 20rpx 0 0;
		padding: 10rpx 25rpx;
		border-radius: 9999rpx;
		position: relative;
	}

	.wanl-search .cu-list.menu>.cu-item {
		min-height: 86rpx;
	}


	.cu-bar .search-form {
		background-color: #f5f5f5;
		line-height: 64rpx;
		height: 64rpx;
		font-size: 24rpx;
		color: #333333;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 25rpx;
	}

	.cu-bar .search-form+.action {
		margin-right: 25rpx;
	}

	.cu-bar .search-form input {
		flex: 1;
		padding-right: 25rpx;
		height: 64rpx;
		line-height: 64rpx;
		font-size: 26rpx;
		background-color: transparent;
	}

	.cu-bar .search-form [class*="wlIcon-"] {
		margin: 0 0.5em 0 0.8em;
	}

	.cu-bar .search-form [class*="wlIcon-"]::before {
		top: 0rpx;
	}

	.cu-bar .action:first-child>text[class*="wlIcon-"] {
		margin-left: -0.3em;
		margin-right: 0.3em;
	}

	.cu-bar .action:first-child {
		margin-left: 25rpx;
		font-size: 30rpx;
	}

	.cu-bar .action:first-child>text[class*="wlIcon-"] {
		margin-left: -0.3em;
		margin-right: 0.3em;
	}

	.cu-bar .action:last-child {
		margin-right: 25rpx;
		position: relative;
	}

	.cu-bar .action>text[class*="wlIcon-"],
	.cu-bar .action>view[class*="wlIcon-"] {
		font-size: 40rpx;
	}

	.cu-bar .action>text[class*="wlIcon-"]+text[class*="wlIcon-"] {
		margin-left: 0.6em;
	}

	.round {
		border-radius: 5000rpx;
	}

	/* ==================搜索列表==================== */
	.wanl-list .headtop {
		height: 80rpx;
	}

	.wanl-list .headtop .cue {
		position: fixed;
		width: 100%;
		animation-name: fluctuate;
		animation-duration: .2s;
		z-index: 1000;
	}

	.wanl-list .bar {
		padding: 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 80rpx;
		font-size: 28rpx;
		background-color: #f7f7f7;
	}

	.wanl-list .bar .item {
		color: #555;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wanl-list .bar .item.current {
		color: #ff4f00;
	}

	.wanl-list .bar .item .box {
		display: flex;
		flex-direction: column;
		height: 42rpx;
		line-height: 1;
	}

	.wanl-list .bar .item .box text[class*="wlIcon-"] {
		color: #cccccc;
		margin: 0 10rpx;
		font-weight: bold;
		font-size: 22rpx;
	}

	.wanl-list .bar .item .box text[class*="wlIcon-"].active {
		color: #ff4f00;
	}

	.wanl-list .menus {
		height: 80rpx;
		background-color: white;
		display: flex;
		align-items: center;
	}
	
	
	.cu-list.menu>.cu-item {
		position: relative;
		display: flex;
		padding: 0 30rpx;
		min-height: 100rpx;
		background-color: #ffffff;
		justify-content: space-between;
		align-items: center
	}
	
	.cu-list.menu>.cu-item:last-child:after {
		border: none
	}
	
	.cu-list.menu-avatar>.cu-item:after,
	.cu-list.menu>.cu-item:after {
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
		width: 200%;
		height: 200%;
		border-bottom: 1rpx solid #ddd;
		border-radius: inherit;
		content: " ";
		transform: scale(.5);
		transform-origin: 0 0;
		pointer-events: none
	}
	
	.cu-list.menu>.cu-item.grayscale {
		background-color: #f5f5f5
	}
	
	.cu-list.menu>.cu-item.cur {
		background-color: #fcf7e9
	}
	
	.cu-list.menu>.cu-item.arrow {
		padding-right: 90rpx
	}
	
	.cu-list.menu>.cu-item.arrow:before {
		position: absolute;
		top: 0;
		right: 30rpx;
		bottom: 0;
		display: block;
		margin: auto;
		width: 30rpx;
		height: 30rpx;
		color: #8799a3;
		content: "\e645";
		text-align: center;
		font-size: 34rpx;
		font-family: wlIcon;
		line-height: 30rpx
	}
	
	.cu-list.menu>.cu-item button.content {
		padding: 0;
		background-color: transparent;
		justify-content: flex-start
	}
	
	.cu-list.menu>.cu-item button.content:after {
		display: none
	}
	
	.cu-list.menu>.cu-item .cu-avatar-group .cu-avatar {
		border-color: #ffffff
	}
	
	.cu-list.menu>.cu-item .content>view:first-child {
		display: flex;
		align-items: center
	}
	
	.cu-list.menu>.cu-item .content>text[class*=wlIcon] {
		display: inline-block;
		margin-right: 10rpx;
		width: 1.6em;
		text-align: center
	}
	
	.cu-list.menu>.cu-item .content>image {
		display: inline-block;
		margin-right: 10rpx;
		width: 1.6em;
		height: 1.6em;
		vertical-align: middle
	}
	
	.cu-list.menu>.cu-item .content {
		font-size: 30rpx;
		line-height: 1.6em;
		flex: 1
	}
	
	.cu-list.menu>.cu-item .content .cu-tag.sm {
		display: inline-block;
		margin-left: 10rpx;
		height: 28rpx;
		font-size: 16rpx;
		line-height: 32rpx
	}
	
	.cu-list.menu>.cu-item .action .cu-tag:empty {
		right: 10rpx
	}
</style>
